<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
    <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

    <%@ taglib prefix="pg" uri="http://jsptags.com/tags/navigation/pager" %>
    <c:set var="contestPath" value="<%=request.getContextPath() %>"></c:set>
<!DOCTYPE html>
<html lang="en">
	<head>
		
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<title>试题管理</title>	
	</head>

		<body>

			<!-- /section:basics/sidebar -->
			<div class="main-content">
				<!-- #section:basics/content.breadcrumbs -->
				

				<!-- /section:basics/content.breadcrumbs -->
				<div class="page-content">
					<!-- #section:settings.box -->
					

					<!-- /section:settings.box -->
					<div class="page-content-area">
						

						<div class="row">
							<div class="col-xs-12">
								<!-- PAGE CONTENT BEGINS -->
								<div class="row">
									<div class="col-xs-12">
									<button id="addTest" class="btn btn-primary btn-lg">新增</button>
										<table id="sample-table-1" class="table table-striped table-bordered table-hover">
											<thead>
												<tr>
													<th class="center">题号</th>
													<th class="center">科目</th>
													<th class="center">提干</th>
													<th class="center">选项A</th>
													<th class="center">选项B</th>
													<th class="center">选项C</th>
													<th class="center">选项D</th>
													<th class="center">答案</th>
													<th class="center">题目类型</th>
													<th class="center">题目分数</th>
													<th class="center">操作</th>
												</tr>
											</thead>
											<tbody>
												<c:forEach items="${page.dates }" var="examTest">
													<tr>
														<td>${examTest.id }</td>
														<td>${examTest.subName }</td>
														<td>${examTest.content }</td>
														<td>${examTest.chooseA }</td>
														<td>${examTest.chooseB }</td>
														<td>${examTest.chooseC }</td>
														<td>${examTest.chooseD }</td>
														<td>${examTest.answer }</td>
														<td>${examTest.examTestType.testType }</td>
														<td>${examTest.examTestType.testTypeScore }</td>
														<td>
																<button class="btn btn-primary btn-xs show_test"><!--  data-toggle="modal" data-target="#showTestModal" -->
																	<i class="ace-icon fa fa-comment"></i>
																</button>
	
																<button class="btn btn-primary btn-xs edit-test">
																	<i class="ace-icon fa fa-pencil"></i>
																</button>
	
																<a  href="deleteTest/${examTest.id }" class="btn btn-primary btn-xs delete-test deleteTest">
																	<i class="ace-icon fa fa-trash-o"></i>
																</a>
														</td>
													</tr>
												</c:forEach>
												
											</tbody>
							
<%-- 											<jsp:include page="/WEB-INF/view/page/page.jsp">
												<jsp:param name="url" value="toManageTest"/>
												<jsp:param name="items" value="${page.totalSize}"/>   
											</jsp:include> --%>
											
										</table>
									</div><!-- /.span -->
								</div><!-- /.row -->
								
								
								
								<!-- 模态框   修改 -->
								<div class="modal fade" id="editTestModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
													&times;
												</button>
												<h4 class="modal-title" id="editTestModalLabel">
													修改试题
												</h4>
											</div>
											<div class="modal-body">
												<form id="editTestForm" method="post">
												
													<p><label></label><input type="text" name="id" class="id" value="" style="display:none"/></p>
												
													<p><label>科目：</label><select name="subId"></select></p>
													<p><label>试题类型：</label><select name="testType"></select><label class="testTypeScore"></label></p>
													<p><label>提干：</label><textarea name="content" class="content" rows="8" cols="50"></textarea></p>
													<p><label>选项A：</label><input type="text" name="chooseA" class="chooseA"/></p>
													<p><label>选项B：</label><input type="text" name="chooseB" class="chooseB"/></p>
													<p><label>选项C：</label><input type="text" name="chooseC" class="chooseC"/></p>
													<p><label>选项D：</label><input type="text" name="chooseD" class="chooseD"/></p>
													<p><label>答案：</label>
														<span>
															<input type="radio" name="answer" value="A" checked />
															<input type="checkbox" name="answer" value="A" />选项A
															<input type="radio" name="answer" value="B" />
															<input type="checkbox" name="answer" value="B" />选项B
															<input type="radio" name="answer" value="C" />
															<input type="checkbox" name="answer" value="C" />选项C
															<input type="radio" name="answer" value="D" />
															<input type="checkbox" name="answer" value="D" />选项D
														</span>	
													</p>
												</form>
												<div class="modal-footer">
													<button type="button" class="btn btn-default" data-dismiss="modal">关闭
													</button>
													<button id="editTestSaveBtn" type="button" class="btn btn-primary">
														修改
													</button>
												</div>
											</div>
										</div><!-- /.modal-content -->
									</div><!-- /.modal -->
								</div>
								<script type="text/javascript">
								$(function(){
									$('.edit-test').click(function(){
										var testId = $(this).parent().siblings().eq(0).text();
										
										$.ajax({
											type: 'POST',
											url: '${contestPath}/getTestById',
											data:{
												testId: testId
											},
											dataType: "json",
											success: function(data){
												var subId = data.subId;
												var examTestTypeId = data.examTestType.id;
												
												$('#editTestModal .id').val(data.id);
												$('#editTestModal .content').val(data.content);
												$('#editTestModal .chooseA').val(data.chooseA);
												$('#editTestModal .chooseB').val(data.chooseB);
												$('#editTestModal .chooseC').val(data.chooseC);
												$('#editTestModal .chooseD').val(data.chooseD);
											
												
												$.ajax({
													type: 'POST',
													url: '${contestPath}/getSubjectAndTypes',
													data:{},
													dataType: "json",
													success: function(data){
														$('#editTestForm select[name="subId"]').empty();
														$('#editTestForm select[name="testType"]').empty();
														
														$.each(data.subjectList, function(index,item){
															if(subId == item.subId){
																$('#editTestForm select[name="subId"]').append('<option value="' + item.subId + '" selected="selected">' + item.name + '</option>');
															}else{
																$('#editTestForm select[name="subId"]').append('<option value="' + item.subId + '">' + item.name + '</option>');
															}
															
														});
														
														$.each(data.testTypeList, function(index,item){
															if(examTestTypeId == item.id){
																$('#editTestForm select[name="testType"]').append('<option value="' + item.id + '" score="' + item.testTypeScore + '" selected="selected">' + item.testType + '</option>');
															}else{
																$('#editTestForm select[name="testType"]').append('<option value="' + item.id + '" score="' + item.testTypeScore + '">' + item.testType + '</option>');
															}
															
														});
														
														$('#editTestForm select[name="testType"]').trigger('change');
													}
													
												});
												
												if(data.examTestType.testType == "单选题"){
													$('#editTestForm input:radio[value="'+data.answer+'"]').attr("checked",true);
												}else{
													var array = data.answer.split(',');
													$.each(array, function(index,item){
														$('#editTestForm input:checkbox[value="'+item+'"]').attr("checked",true);
													})
												}
											}
											
										});
										
										$('#editTestModal').modal('show');
									});
									
									$('#editTestForm select[name="testType"]').change(function(){
										$('#editTestForm .testTypeScore').text('本题'+$(this).find('option:checked').attr('score')+'分');
										var testType = $(this).find('option:checked').val();
										if(testType == "1"){
											$('#editTestForm input:radio').show();
											$('#editTestForm input:checkbox').hide();
										}else if(testType == "2"){
											$('#editTestForm input:checkbox').show();
											$('#editTestForm input:radio').hide();
										}else{
											alert('无试题类型')
										}
									});
									$("#editTestSaveBtn").click(function(){
										var id = $('#editTestForm input[name="id"]').val();
										var subId = $('#editTestForm select[name="subId"]').val();
										var testType = $('#editTestForm select[name="testType"]').val();
										var content = $('#editTestForm textarea[name="content"]').val();
										var chooseA = $('#editTestForm input[name="chooseA"]').val();
										var chooseB = $('#editTestForm input[name="chooseB"]').val();
										var chooseC = $('#editTestForm input[name="chooseC"]').val();
										var chooseD = $('#editTestForm input[name="chooseD"]').val();
										var answerString = '';
										if(testType == 1){
											answerString += $('#editTestForm input[name=answer]:radio:checked').val();
										}else if(testType == 2){
											var array = $('#editTestForm input[name=answer]:checkbox:checked');
											$.each(array, function(index, item){
												answerString += (index == 0 ? $(item).val() : (',' + $(item).val()));
											})
										}else{
											alert('无试题类型');
										}
										$.ajax({
											type : 'POST',
											url: '${contestPath}/editTest',
											data: {
												id:id,
												subId: subId,
												'examTestType.id': testType,
												content: content,
												chooseA: chooseA,
												chooseB: chooseB,
												chooseC: chooseC,
												chooseD: chooseD,
												answer: answerString
											},
											dataType: "json",
											success: function(data){
												if(data.success) {
													alert('修改成功');
													window.location.reload();
												}else{
													var messageMap = data.messageMap;
													for(var key in messageMap){
														var value = messageMap[key];
														$('#addTestForm input[name="'+key+'"]').after('');
													}
													alert('修改失败！ - ' + messageMap['message']);
												}
											}
										});
									});
								})
								
								</script>
								
								<!-- 删除 -->
								<script type="text/javascript">
									$(function(){
										$(".deleteTest").click(function(){
											if(confirm("是否确认删除？")){
												return true;
											}else{
												return false;
											}
										})
									})
								</script>
								
								
								
								<!--模态框     新增-->
								<div class="modal fade" id="addTestModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
													&times;
												</button>
												<h4 class="modal-title" id="addTestModalLabel">
													新增试题
												</h4>
											</div>
											<div class="modal-body">
												<form id="addTestForm" method="post">
													<p><label>科目：</label><select name="subId"></select></p>
													<p><label>试题类型：</label><select name="testType"></select><label class="testTypeScore"></label></p>
													<p><label>提干：</label><textarea name="content" rows="8" cols="50" placeholder="题目内容"></textarea></p>
													<p><label>选项A：</label><input type="text" name="chooseA" placeholder="作为选项A" /></p>
													<p><label>选项B：</label><input type="text" name="chooseB" placeholder="作为选项B" /></p>
													<p><label>选项C：</label><input type="text" name="chooseC" placeholder="作为选项C" /></p>
													<p><label>选项D：</label><input type="text" name="chooseD" placeholder="作为选项D" /></p>
													<p><label>答案：</label>
														<span>
															<input type="radio" name="answer" value="A" checked />
															<input type="checkbox" name="answer" value="A" />选项A
															<input type="radio" name="answer" value="B" />
															<input type="checkbox" name="answer" value="B" />选项B
															<input type="radio" name="answer" value="C" />
															<input type="checkbox" name="answer" value="C" />选项C
															<input type="radio" name="answer" value="D" />
															<input type="checkbox" name="answer" value="D" />选项D
														</span>	
													</p>
												</form>
												<div class="modal-footer">
													<button type="button" class="btn btn-default" data-dismiss="modal">关闭
													</button>
													<button id="addTestSaveBtn" type="button" class="btn btn-primary">
														保存
													</button>
												</div>
											</div>
										</div><!-- /.modal-content -->
									</div><!-- /.modal -->
								</div>
								<script type="text/javascript">
									$(function(){
										$('#addTest').click(function(){
											$.ajax({
												type: 'POST',
												url: '${contestPath}/getSubjectAndTypes',
												data:{},
												dataType: "json",
												success: function(data){
													$('#addTestForm select[name="subId"]').empty();
													$('#addTestForm select[name="testType"]').empty();
													
													$.each(data.subjectList, function(index,item){
														$('#addTestForm select[name="subId"]').append('<option value="' + item.subId + '">' + item.name + '</option>');
													});
													
													$.each(data.testTypeList, function(index,item){
														$('#addTestForm select[name="testType"]').append('<option value="' + item.id + '" score="' + item.testTypeScore + '">' + item.testType + '</option>');
													});
													$('#addTestForm select[name="testType"]').trigger('change');
												}
												
											});
											
											$('#addTestModal').modal('show');
										});
										$('#addTestForm select[name="testType"]').change(function(){
											$('#addTestForm .testTypeScore').text('本题'+$(this).find('option:checked').attr('score')+'分');
											var testType = $(this).find('option:checked').val();
											if(testType == "1"){
												$('#addTestForm input:radio').show();
												$('#addTestForm input:checkbox').hide();
											}else if(testType == "2"){
												$('#addTestForm input:checkbox').show();
												$('#addTestForm input:radio').hide();
											}else{
												alert('无试题类型')
											}
										});
									
										$("#addTestSaveBtn").click(function(){
											//if($("#addTestForm").valid()){
												var subId = $('#addTestForm select[name="subId"]').val();
												var testType = $('#addTestForm select[name="testType"]').val();
												var content = $('#addTestForm textarea[name="content"]').val();
												var chooseA = $('#addTestForm input[name="chooseA"]').val();
												var chooseB = $('#addTestForm input[name="chooseB"]').val();
												var chooseC = $('#addTestForm input[name="chooseC"]').val();
												var chooseD = $('#addTestForm input[name="chooseD"]').val();
												var answerString = '';
												if(testType == 1){
													answerString += $('#addTestForm input[name=answer]:radio:checked').val();
												}else if(testType == 2){
													var array = $('#addTestForm input[name=answer]:checkbox:checked');
													$.each(array, function(index, item){
														answerString += (index == 0 ? $(item).val() : (',' + $(item).val()));
													})
												}else{
													alert('无试题类型');
												}
												$.ajax({
													type : 'POST',
													url: '${contestPath}/saveTest',
													data: {
														subId: subId,
														'examTestType.id': testType,
														content: content,
														chooseA: chooseA,
														chooseB: chooseB,
														chooseC: chooseC,
														chooseD: chooseD,
														answer: answerString
													},
													dataType: "json",
													success: function(data){
														if(data.success) {
															alert('添加成功');
															window.location.reload();
														}else{
															var messageMap = data.messageMap;
															for(var key in messageMap){
																var value = messageMap[key];
																$('#addTestForm input[name="'+key+'"]').after('');
															}
															alert('添加失败！ - ' + messageMap['message']);
														}
													}
												});
										//	}	
										});
									})
								</script>
								<!--模态框     查看详细试题-->
								<div class="modal fade" id="showTestModal" tabindex="-1" role="dialog" aria-labelledby="showTestModalLable" aria-hidden="true">
									<div class="modal-dialog">
										<div class="modal-content">
											<div class="modal-header">
												<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
													&times;
												</button>
												<h4 class="modal-title" id="showTestModalLabel">
													查看详细试题
												</h4>
											</div>
											
											<div class="modal-body">
												<label>试题科目：&nbsp;&nbsp;</label><span class="sub-name"></span><br>
												<label>题目：&nbsp;&nbsp;</label><span class="content"></span><label>----&nbsp;&nbsp;题型：&nbsp;&nbsp;</label><span class="test-type"></span>(<span class="test-type-score"></span>)分<br>
												<label>A：&nbsp;&nbsp;</label><span class="choose-a"></span><br>
												<label>B：&nbsp;&nbsp;</label><span class="choose-b"></span><br>
												<label>C：&nbsp;&nbsp;</label><span class="choose-c"></span><br>
												<label>D：&nbsp;&nbsp;</label><span class="choose-d"></span><br>
												<label style="font-weight">答案：&nbsp;&nbsp;</label><span class="answer"></span><br>
											</div>
											<div class="modal-footer">
													<button type="button" class="btn btn-default" data-dismiss="modal">关闭
													</button>
											</div>
										</div><!-- /.modal-content -->
									</div><!-- /.modal -->
								</div>
								<script type="text/javascript">
									$(function(){
										$('.show_test').click(function(){
											var testId = $(this).parent().siblings().eq(0).text();
											$.ajax({
												type: 'POST',
												url: '${contestPath}/getTestById',
												data: {
													testId: testId
												},
												dataType: "json",
												success: function(data){
													$('#showTestModal .sub-name').text(data.subName);
													$('#showTestModal .content').text(data.content);
													$('#showTestModal .test-type').text(data.examTestType.testType);
													$('#showTestModal .test-type-score').text(data.examTestType.testTypeScore);
													$('#showTestModal .choose-a').text(data.chooseA);
													$('#showTestModal .choose-b').text(data.chooseB);
													$('#showTestModal .choose-c').text(data.chooseC);
													$('#showTestModal .choose-d').text(data.chooseD);
													$('#showTestModal .answer').text(data.answer);
												}
											});
											$('#showTestModal').modal('show');
										});
										
									});
									
								</script>
								
								
								
							

								
							</div><!-- /.col -->
						</div><!-- /.row -->
					</div><!-- /.page-content-area -->
				</div><!-- /.page-content -->
			</div><!-- /.main-content -->

		<!-- the following scripts are used in demo only for onpage help and you don't need them -->

	</body>
</html>
